vue

<template>
    <div class="operate" @click="click" :style="operateStyle" data-layout="row">
        <design :drawer.sync="drawer" :options="design" @change="handlChange" @submit="handerClick"></design>
    </div>
</template>
  
<script>
import design from "./design.vue"
import DesignForm from "@/utils/design";

export default {
    props: {
        // 操作遮罩组件名称
        name: String,
        // 所属模块信息
        layoutMsg: Object,
        // 布局类型
        flexType: {
            type: String,
            default: ""
        }
    },
    components: { design },
    data() {
        return {
            design: [],
            drawer: false,
            operateStyle: {
                height: ""
            },
            attribute: {
                width: "",
                height: ""
            },
        }
    },
    created() {
        this.design = new DesignForm(this.layoutMsg.type)
        // console.log(data, this.layoutMsg, "datadatadata")
    },
    watch: {
        operateStyle: {
            handler() {
                // this.$emit("change", this.operateStyle)
            },
            deep: true
        }
    },
    methods: {
        click() {
            this.drawer = true
        },
        handlChange(data) {
            let layout = ""
            for (let i in data) {
                let key = this.flexType.includes("col") ? "height" : "width"
                if (i === key) {
                    this.operateStyle[key] = data[key]
                    this.operateStyle.flex = `0 0 ${data[key]}`
                } else if (i === "flex") {
                    layout = data[i]
                } else {
                    this.operateStyle[i] = data[i]
                }
            }
            this.$emit("change", [this.operateStyle, layout])
        },
        handerClick() {
            this.$emit("update:name", "")
            this.$emit("submit", this.operateStyle)
        }
    }
}
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
main {
    padding: 20px;
}

.attribute {
    position: absolute;
    width: 200px;
    background: #fff;
}

.operate {
    position: absolute;
    z-index: 999;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .2)
}

.top-left {
    width: 10px;
    height: 10px;
    border: 1px dashed #fff;
    cursor: e-resize;
}

.top {
    width: calc(100% - 20px);
    height: 10px;
    border: 1px dashed #fff;
    cursor: e-resize;
}

.top-right {
    width: 10px;
    height: 10px;
    border: 1px dashed #fff;
    cursor: e-resize;
}
</style>
  